<!--
 * @Date: 2024-12-23 13:31:48
 * @LastEditors: Lcx l1556461835@163.com
 * @LastEditTime: 2025-03-17 15:34:48
 * @FilePath: \simulation-fontend\pages\index.vue
 * @Description: 我的App
-->
<template>
 <div>
  <el-card style="height: calc(100vh - 84px)">
    <div class="items-container">
      <div v-for="(item, index) in items" 
           :key="index" 
           class="item"
           @click="handleClick(item.component, item.title)">
        <div class="hexagon">
          <div class="hexagon-content">
            <i class="icon">{{item.icon}}</i>
            <span class="title">{{item.title}}</span>
          </div>
        </div>
      </div>
    </div>
  </el-card>

  <!-- 所有弹窗页面 -->
  <el-dialog
    :visible.sync="fceDialogVisable"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="dialogTitle"
    width="80%">
    <component v-if="fceDialogVisable" :is="tab" class="simBox" @close="handleClose"></component>
  </el-dialog>
 </div>
</template>

<script>
import FmSim from "./components/FmSim.vue"; // 精轧
import RmSim from "./components/RmSim.vue";
import FceSim from "./components/FceSim.vue";
import LCS from "./components/LCS.vue";
import prediction from "./components/prediction.vue";

export default {
  components: { FmSim, RmSim, FceSim, LCS, prediction },
  data() {
    return {
      fceDialogVisable: false,
      dialogTitle: "",
      tab: "FceSim",
      items: [
        { component: "FceSim", title: "加热炉仿真", icon: "加热炉" },
        { component: "RmSim", title: "粗轧仿真", icon: "粗轧" },
        { component: "FmSim", title: "精轧仿真", icon: "精轧" },
        { component: "LCS", title: "层冷仿真", icon: "层冷" }
        // { component: "prediction", title: "性能预测", icon: "性能预测" }
      ]
    };
  },
  methods: {
    handleMouseEnter() {
      this.$refs.carousel && this.$refs.carousel.pauseTimer();
    },
    handleMouseLeave() {
      this.$refs.carousel && this.$refs.carousel.startTimer();
    },
    handleClick(params, name) {
      this.dialogTitle = name;
      this.tab = params;
      this.fceDialogVisable = true;
    },
    handleClose() {
      this.fceDialogVisable = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.items-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: calc(100vh - 84px);
  margin: 0;
}

.item {
  flex: 0 0 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hexagon {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background: #001f6b;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.hexagon:hover {
  transform: scale(1.05);
}

.hexagon-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: #fff;
}

.icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.title {
  font-size: 14px;
}

.simBox {
  height: calc(100vh - 140px);
  overflow-y: scroll;
}

:deep(.el-carousel__container) {
  display: flex;
  justify-content: center;
}

:deep(.el-carousel__item) {
  width: 25% !important;
  margin-right: 0;
}

:deep(.el-carousel__item--card) {
  width: 25% !important;
  margin-right: 0;
}

:deep(.el-carousel__item--card.is-active) {
  transform: translateX(0) scale(1);
}

:deep(.el-carousel__item--card.is-in-stage) {
  transform: translateX(0) scale(0.9);
  transition: all 0.4s ease;
}

:deep(.el-carousel__mask) {
  display: none;
}

:deep(.el-carousel__arrow--left) {
  left: 0;
}

:deep(.el-carousel__arrow--right) {
  right: 0;
}

:deep(.el-carousel__indicators) {
  display: none;
}

:deep(.el-carousel__arrow) {
  background-color: transparent;
  border: none;
  &:hover {
    background-color: rgba(31, 45, 61, 0.11);
  }
}
</style>
